<template>
	<view class="">
		<view class="flex flex-column align-center justify-center u-p-y-40 u-m-b-20 bg-white" v-if="goods.status != 1">
			<view class="flex flex-column align-center" v-if="goods.status == 3">
				<image src="/static/order/suc.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
				<text class="u-m-t-20">恭喜您组团成功!</text>
			</view>
			<view class="flex flex-column align-center" v-if="info.status == 20">
				<u-icon name="info-circle-fill" size="80" color="var(--mainColor)"></u-icon>
				<text class="u-m-t-20">很遗憾 组团失败！</text>
			</view>
			<text class="u-m-t-30 text-primary" @click="toIndex">返回首页</text>
		</view>
		<view class="bg-white">
			<view class="u-p-x-30 u-p-b-30">
				<view class="flex align-center justify-between u-p-y-30 u-border-bottom" @click="teamShow = true">
					<u-avatar :src="team_user.avatar" size="67"></u-avatar>
					<view class="flex-1 flex align-center justify-between u-p-l-20">
						<text>团长：{{team_user.username}}</text>
						<text>{{team_user.text}}</text>
					</view>
				</view>
				<!-- 商品 -->
				<view class="flex align-center u-p-y-30 u-border-bottom">
					<u-image :src="goods.goods_image" width="108rpx" height="108rpx" borderRadius="10"></u-image>
					<view class="flex-1 flex flex-column justify-between u-p-l-20" style="height: 108rpx">
						<view class="text-ellipsis-2">
							<text class="">{{goods.goods_name}}</text>
						</view>
						<text class="text-danger u-font-28 u-p-t-10 font-weight-bold">¥{{goods.goods_price}}</text>
					</view>
				</view>
				
				<view class="flex flex-column align-center justify-center">
					<text class="font-30">{{goods.need_num}}人团</text>
					<view class="flex align-center flex-wrap justify-between">
						<block v-for="(item,index) in orders" :key="index">
							<u-avatar class="u-m-x-20 u-m-t-20" :src="item.avatar" ></u-avatar>
						</block>
					</view>
					<view class="flex align-end u-p-t-20" v-if="goods.status != 3">
						<text class="u-font-26">还差 {{teamInfo.gap_num}} 人组团成功，快邀请您的好友来拼团吧！</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 倒计时 -->
		<view class="u-m-50" v-if="goods.status != 3">
			<view class="">
				<u-divider bgColor="#f2f2f2" borderColor="#333">
					<view class="flex align-center">
						<text class="u-font-26 text-dark">剩余</text>
						<view class="u-p-x-10">
							<u-count-down :timestamp="teamInfo.duetime" bgColor="#ca0e1d" font-size="26" color="#fff" border-color="#ca0e1d"></u-count-down>
						</view>
						<text class="u-font-26 text-dark">结束</text>
					</view>
				</u-divider>
			</view>
		</view>
		<view class="position-fixed bottom-0 left-0 right-0" v-if="goods.status !== 20 && teamInfo.gap_num != 0">
			<view class="safe-bottom">
				<u-button type="warning" @click="share">邀请好友</u-button>
			</view>
		</view>
		<!-- <u-popup v-model="teamShow" mode="center" width="90%" borderRadius="20">
			<view class="flex flex-column p-2">
				<text class="font font-weight-bold py-2 text-center">团长信息</text>
				<u-field disabled	label="开团人"	:placeholder="team.username"></u-field>
				<u-field disabled	label="联系电话"	:placeholder="team.mobile"></u-field>
				<u-field disabled	label="收货地址"	:placeholder="team.province+team.city+team.region"></u-field>
				<u-field disabled	label="下单时间"	:placeholder="team.createtime"></u-field>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import { GroupCenterApi } from '@/api/serves.js'
	// import { groupApi } from '@/api/groupAjax.js'
	export default {
		data() {
			return {
				teamShow: false,
				id: '',
				teamInfo: {},
				info: {},
				team_user: {}, //团长信息
				goods: {}, // 拼团商品
				orders: [], // 拼团人数
				teamLeader: {}
			}
		},
		onLoad(options) {
			console.log('options', options);
			this.id = options.id
			this._teamInfo()
		},
		methods: {
			_teamInfo() {
				this.$ShowLoading()
				GroupCenterApi.getTeamDetail({groups_team_id: this.id}).then(res => {
					this.$HideLoading()
				  console.log('拼团详情', res);
					if(res.code == 1){
						this.teamInfo = res.data
						this.team_user = res.data.team_user
						this.goods = res.data.team;
						this.orders = res.data.orders;
					}else {
						this.$Toast(res.msg)
					}
				})
			},
			toIndex() {
				uni.switchTab({
					url: '/pages/tabbar/index/index'
				})
			},
			share() {
				let params = {
					title: this.goods.goods_name,
					src:  this.goods.goods_image,
					id: this.id
				}
				uni.navigateTo({
					url:'/pages/group/grouopDetailCanvas/grouopDetailCanvas?info=' + JSON.stringify(params)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep.u-countdown-item {
	padding: 5rpx 20rpx;
	border-radius: 20rpx;
}
</style>
